<template>
  <view class="container">
    <view class="header">
      <view class="search">
        <u-search
          placeholder="请输入产品"
          v-model="keyword"
          :showAction="false"
          bgColor="#f7f8fa"
          @search="search"
        ></u-search>
      </view>
    </view>

    <!-- 下拉刷新 -->
    <scroll-view
      v-if="list.length > 0"
      class="list"
      :scroll-y="true"
      :refresher-triggered="triggered"
      :refresher-enabled="true"
      @refresherrefresh="onRefresh"
      @scrolltolower="onBottom"
      :style="{ height: `${height}px` }"
      :lower-threshold="100"
      :scroll-top="top"
      @scroll="onScroll"
    >
      <!-- navigator页面跳转 -->
      <navigator
        :url="`/pages/validate/info?code=${item.query_code}`"
        class="item"
        v-for="(item, key) in list"
        :key="key"
      >
        <view class="title"> {{ item.products.name }} </view>

        <view class="line"></view>

        <view class="son-list">
          <view class="son-item">
            <view class="name"> 查询次数： </view>
            <view class="value"> {{ item.query_num }} </view>
          </view>

          <view class="son-item">
            <view class="name"> 您查询的防伪码： </view>
            <view class="value"> {{ item.query_code }} </view>
          </view>

          <view class="son-item">
            <view class="name"> 首次查询时间： </view>
            <view class="value"> {{ item.query_time_text }} </view>
          </view>

          <view class="son-item">
            <view class="name"> 小程序码： </view>
            <view class="value">
              <image src="/static/images/code.png" />
            </view>
          </view>
        </view>
      </navigator>

      <!-- 底部 加载数据+没有更多 的提示信息 -->
      <u-loadmore
        :status="status"
        marginBottom="40"
        fontSize="20"
        lineColor="#1CD29B"
        dashed
        line
      />
    </scroll-view>

    <!-- 提醒组件 -->
    <u-toast ref="notice" />

    <!-- 返回顶部 -->
    <u-back-top :scroll-top="top" @click="BackTop"></u-back-top>
  </view>
</template>
<script>
export default {
  onShow() {
    //获取本地存储
    var business = uni.getStorageSync("business")
      ? uni.getStorageSync("business")
      : {};

    // 判断对象是否为空
    if (Object.getOwnPropertyNames(business).length > 0) {
      this.business = business;
      this.onRefresh(); //触发下拉刷新
    } else {
      //没有登录,跳转
      uni.$u.route({
        type: "reLaunch", //关闭所有界面，重新打开一级界面
        url: "/pages/validate/validate",
      });
      return false;
    }
  },
  onReady() {
    //调用uni接口 获取页面的高度
    uni.getSystemInfo({
      success: (res) => {
        this.height = res.windowHeight;
      },
    });
  },
  data() {
    return {
      triggered: false, // 下拉刷新状态
      Isfreshing: false, //防止重复刷新
      list: [],
      page: 1,
      business: {},
      status: "loadmore",
      keyword: "",
      height: 0, //页面高度
      top: 0, //页面滚动的高度
    };
  },
  methods: {
    //下拉刷新
    onRefresh() {
      //防止重复下拉刷新
      if (this.Isfreshing) return;

      //执行一次下拉刷新
      this.Isfreshing = true;

      //判断是否处于下拉刷新中
      if (!this.triggered) this.triggered = true; //正在下拉刷新中

      this.page = 1; //分页恢复第一页
      this.list = []; //数据清空

      //请求数据
      this.ProductData();
    },
    //上拉加载
    onBottom() {
      this.ProductData();
    },
    // 搜索
    search() {
      this.onRefresh();
    },
    //返回顶部
    BackTop() {
      this.top = 0;
    },
    //监听页面滚动
    onScroll(e) {
      // 把滚动的高度数值赋值
      this.top = e.detail.scrollTop;
    },
    // 防伪数据查询
    async ProductData() {
      // 组装数据
      var params = {
        busid: this.business.id,
        page: this.page,
        keyword: this.keyword,
      };

      // 发送请求
      var result = await uni.$u.http.post("/business/product", params);

      if (this.triggered) this.triggered = false; // 如果刷新状态为true 修改为false
      if (this.Isfreshing) this.Isfreshing = false;
      this.status = "loadmore"; //加载数据

      if (result.code == 0) {
        //没有更多数据
        this.status = "nomore";
        return false;
      }

      // 合并
      this.list = this.list.concat(result.data);
      this.page++;
    },
  },
};
</script>

<style>
page {
  background-color: #eee;
}

.container {
  width: 95%;
  margin: 0 auto;
  padding-bottom: 20px;
}

.header {
  background-color: #fff;
  padding: 10px 0;
  margin-top: 10px;
  border-radius: 10px;
}

.header .search {
  width: 95%;
  margin: 0 auto;
}

.item {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 10px;
  padding: 0 10px 10px;
}

.item .title {
  padding: 10px 0 10px 10px;
  font-size: 20px;
}

.item .line {
  width: 100%;
  height: 1px;
  background: #ebebeb;
  margin: 0 auto;
  margin-bottom: 10px;
}

.item .son-list .son-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
}

.item .son-list .son-item .name {
  color: #9b9b9a;
}

.item .son-list .son-item image {
  width: 30px;
  height: 30px;
}
</style>
